@import './../../assert/stylus/mixin.styl'

.star
    display flex
    align-items center
    justify-content center
    .star-item
      background-repeat no-repeat
    &.star-48
      .star-item
        width: 20px
        height: 20px
        margin-right: 22px
        background-size: 20px 20px
        &:last-child
          margin-right: 0
        &.on
           background-image: url('icon/star48_on@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/star48_on@3x.png')
        &.half
           background-image: url('icon/star48_half@2x.png')
           @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
              background-image: url('icon/star48_half@3x.png')
        &.off
           background-image: url('icon/star48_off@2x.png')
           @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
              background-image: url('icon/star48_off@3x.png')
    &.star-36
      .star-item
        width: 15px
        height: 15px
        margin-right: 6px
        background-size: 15px 15px
        &:last-child
          margin-right: 0
        &.on
           background-image: url('icon/star36_on@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/star36_on@3x.png')
        &.half
           background-image: url('icon/star36_half@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/star36_half@3x.png')
        &.off
           background-image: url('icon/star36_off@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/star36_off@3x.png')
    &.star-24
      .star-item
        width: 10px
        height: 10px
        margin-right: 3px
        background-size: 10px 10px
        &:last-child
          margin-right: 0
        &.on
           background-image: url('icon/star24_on@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/star24_on@3x.png')
        &.half
           background-image: url('icon/star24_half@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/star24_half@3x.png')
        &.off
           background-image: url('icon/star24_off@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/star24_off@3x.png')